<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我们的宿舍故事</title>
    <style>
        /* 全局样式 */
        body {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
            color: #333;
            line-height: 1.7;
        }

        /* 导航栏样式 */
        nav {
            background-color: rgba(255, 165, 0, 0.9);
            color: white;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            display: flex;
            justify-content: center;
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            gap: 20px;
        }

        nav ul li {
            padding: 18px 25px;
            transition: background-color 0.3s ease;
        }

        nav ul li a {
            color: white;
            text-decoration: none;
            font-size: 1.15em;
            font-weight: 500;
            letter-spacing: 0.5px;
            position: relative;
        }

        nav ul li a::after {
            content: '';
            position: absolute;
            width: 100%;
            transform: scaleX(0);
            height: 2px;
            bottom: -5px;
            left: 0;
            background-color: white;
            transform-origin: bottom right;
            transition: transform 0.3s ease-out;
        }

        nav ul li a:hover::after {
            transform: scaleX(1);
            transform-origin: bottom left;
        }

        /* 头部样式 */
        header {
            background: linear-gradient(to bottom, rgba(255, 140, 0, 0.8), rgba(255, 140, 0, 0.6)), url('https://via.placeholder.com/1920x600?text=Dormitory+Background');
            background-size: cover;
            background-position: center;
            color: white;
            text-align: center;
            padding: 150px 20px 100px;
            position: relative;
        }

        header h1 {
            font-size: 4em;
            margin-bottom: 20px;
            text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        header p {
            font-size: 1.4em;
            margin-bottom: 40px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        /* 头部内的导航列表样式 */
        header ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            gap: 25px;
        }

        header ul li a {
            color: white;
            text-decoration: none;
            font-size: 1.2em;
            border: 2px solid white;
            padding: 12px 25px;
            border-radius: 30px;
            transition: all 0.3s ease;
            background-color: rgba(255, 255, 255, 0.1);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        header ul li a:hover {
            background-color: white;
            color: #FF8C00;
            transform: translateY(-3px);
        }

        /* 主体内容样式 */
        section {
            padding: 40px 30px;
            /* 调整内边距 */
            margin: 40px auto;
            /* 调整外边距 */
            background-color: white;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            width: 80%;
            max-width: 1200px;
            transition: all 0.3s ease;
        }

        section:hover {
            transform: translateY(-8px);
        }

        h2 {
            color: #FF8C00;
            font-size: 2.2em;
            /* 适当减小标题字体大小 */
            margin-bottom: 20px;
            /* 调整标题底部间距 */
            border-bottom: 3px solid #FF8C00;
            padding-bottom: 10px;
            /* 调整标题底部内边距 */
            display: inline-block;
        }

        article {
            margin-bottom: 30px;
            /* 调整文章底部间距 */
            border-bottom: 1px solid #eee;
            padding-bottom: 30px;
            /* 调整文章底部内边距 */
        }

        article h3 {
            color: #FFA500;
            font-size: 1.6em;
            /* 适当减小小标题字体大小 */
            margin-bottom: 15px;
            /* 调整小标题底部间距 */
        }

        /* 宿舍日记部分样式 */
        #dormitory-diary article {
            position: relative;
            padding-left: 30px;
        }

        #dormitory-diary article::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 6px;
            height: 100%;
            background-color: #FF8C00;
            border-radius: 3px;
        }

        /* 宿舍回忆部分样式 */
        #dormitory-memories article img {
            max-width: 100%;
            height: auto;
            border-radius: 15px;
            margin-bottom: 20px;
            /* 调整图片底部间距 */
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        #dormitory-memories article img:hover {
            transform: scale(1.03);
        }

        /* 宿舍未来部分样式 */
        #dormitory-future p {
            font-size: 1.1em;
            /* 适当减小段落字体大小 */
            margin-bottom: 20px;
            /* 调整段落底部间距 */
        }

        #dormitory-future p:last-child {
            font-style: italic;
            color: #7f8c8d;
        }

        /* 页脚样式 */
        .copyright {
            text-align: center;
            line-height: 30px;
            color: #fff;
            padding-bottom: 30px;
        }

        footer {
            padding-top: 30px;
            margin-top: 20px;
            background-color: #333;
            border-top: solid 5px #ff6600;
        }
    </style>
</head>

<body>
    <!-- 合并后的导航栏 -->
    <nav>
        <ul>
            <li><a href="index.html">首页</a></li>
            <li><a href="宿舍成员.html">宿舍成员</a></li>
            <li><a href="宿舍生活3.html">宿舍生活</a></li>
            <li><a href="宿舍故事.html">宿舍故事</a></li>
        </ul>
    </nav>
    <header>
        <h1>我们的宿舍故事</h1>
        <p>那些一起欢笑、一起奋斗的日子，是青春最美的回忆</p>
        <ul>
            <li><a href="#dormitory-diary">宿舍日记</a></li>
            <li><a href="#dormitory-memories">宿舍回忆</a></li>
            <li><a href="#dormitory-future">宿舍未来</a></li>
        </ul>
    </header>
    <section id="dormitory-diary">
        <h2>宿舍日记</h2>
        <article>
            <h3>2023 年 9 月 2 日 - 王乐乐</h3>
            <p>今天是开学的第一天，大家都拖着重重的行李来到了宿舍。一见面，彼此都有点陌生和拘谨。但很快，我们就开始互相帮忙整理行李，交流着各自的家乡和爱好。高晨雨带来了家乡的特产，大家围坐在一起分享，欢声笑语回荡在宿舍里，那种陌生感一下子就消失了。我心想，接下来的日子一定会很精彩！
            </p>
        </article>
        <article>
            <h3>2024 年 12 月 15 日 - 戴海琴</h3>
            <p>最近考试季到了，大家都在紧张地复习。宿舍里的氛围变得格外安静，只有键盘的敲击声和翻书的声音。昨天晚上，[王乐乐]为了一道难题愁眉苦脸，大家纷纷放下手中的书本，一起帮他解答。经过一番激烈的讨论，我们终于攻克了难题。那一刻，我感受到了宿舍的温暖和团结，这种一起奋斗的感觉真好。
            </p>
        </article>
        <article>
            <h3>2025 年 3 月 20 日 - 黄晚晴</h3>
            <p>今天宿舍进行了一次大扫除，大家分工明确，各司其职。有人扫地，有人擦窗户，有人整理书架。在打扫的过程中，我们还翻出了很多之前的照片和小物件，回忆起了很多有趣的事情，大家笑得前仰后合。看着干净整洁的宿舍，我们都有一种满满的成就感。
            </p>
        </article>
    </section>
    <section id="dormitory-memories">
        <h2>宿舍回忆</h2>
        <article>
            <h3>台风天</h3>
            <img src="IMG/dap.png" alt="台风天">
            <p>在“摩羯”之后整个海口基本处于断水断电断信号，我们宿舍唯一的乐趣就是打牌。</p>
        </article>
        <article>
            <h3>庆祝</h3>
            <img src="IMG/biy.png" alt="生日派对">
            <p>在每一次开学来临的时候我们宿舍总会去庆祝一下。</p>
        </article>
        <article>
            <h3>海边烧烤</h3>
            <img src="IMG/合照.jpg" alt="户外烧烤派对">
            <p>有一次，我们一起去海边进行户外烧烤。大家提前准备好了食材和工具，一路上欢声笑语。到了目的地，我们分工合作，有的搭帐篷，有的生火，有的串食材。当第一串烤肉烤好时，大家都迫不及待地品尝起来，味道虽然不专业，但却格外美味。我们一边吃着烧烤，一边欣赏着郊外的美景，感受着大自然的气息，那一刻，仿佛所有的烦恼都烟消云散了。
            </p>
        </article>
    </section>
    <section id="dormitory-future">
        <h2>宿舍未来</h2>
        <p>戴海琴希望未来能够成为一名优秀的软件工程师，在科技领域发光发热，为社会创造更多有价值的产品。</p>
        <p>王乐乐期待着能成为一名教师，用自己的知识和爱心去培养下一代，看着他们茁壮成长。</p>
        <p>高晨雨梦想着创立自己的公司，打造一个具有影响力的品牌，实现自己的商业抱负。</p>
        <p>无论未来我们身在何处，从事什么职业，都希望这份宿舍情谊能够永远延续，大家都能过上幸福、充实的生活。愿我们在各自的道路上勇往直前，追逐自己的梦想，在人生的舞台上绽放属于自己的光芒。</p>
    </section>
    <footer>
        <div class="copyright">
            <p>戴海琴|高晨雨|黄晚晴|王乐乐</p>
            <p>10215宿舍 版权所有</p>
        </div>
    </footer>
</body>

</html>